<template>
	<view>
		<view class="head">
			<block v-if="hasLogin">
				<view class="userinfo justify-content-between align-items-center" @click="jump('/pages/user/home?uuid='+userInfo.uuid)">
					<view class="d-flex align-items-center">
						<cos-avatar class="mr-20" :src="userInfo.avatar" :showSex="true" :sexIcon="userInfo.gender_label" size="120"></cos-avatar>
						<view class="username">
							<text class="font-size-lg mb-10">{{ userInfo.nickname }}</text>
							<text class="sub-txt mb-10">
								<text class="mr-10" v-if="userInfo.city||userInfo.province">{{userInfo.city||userInfo.province}} |</text>
								<text class="mr-10">{{ userInfo.identity_label}}</text>
							</text>
							<view class="tag-box d-flex">
								<view v-if="userInfo.is_guaranty==1" class="tag tag-guaranty"><u-icon name='rmb' color="#ffffff" size='22'></u-icon>已担保</view>
								<view v-if="userInfo.is_cert==1" class="tag tag-cert"><u-icon name='account-fill' color="#ffffff" size='22'></u-icon>已认证</view>
							</view>
						</view>
					</view>
					<view class="d-flex align-items-center">
						<view class="text-color-danger" v-if="userInfo.status==0">个人资料审核中</view>
						<q-icon class="arrow-right" name="q-arrow-right" size="20"></q-icon>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="btn-login">
					<!-- #ifdef MP-WEIXIN -->
					<button class="border-radius-lg" type="primary" @click="toLogin">登录</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button @click="jumpPhoneLogin">登录</button>
					<!-- #endif -->
				</view>
			</block>
			<view v-if="hasLogin" class="mt-20 mb-20">
				<u-grid :col="4" :border="false" style="margin: 20rpx 0;" @click="jump">
					<u-grid-item index="/pages/my/fans">
						<text class="font-size-extra-lg">{{userInfo.fans}}</text>
						<view class="grid-text">粉丝</view>
					</u-grid-item>
					<u-grid-item index="/pages/my/follow">
						<text class="font-size-extra-lg">{{userInfo.follows}}</text>
						<view class="grid-text">关注</view>
					</u-grid-item>
					<u-grid-item index="/pages/my/beans">
						<text class="font-size-extra-lg">{{userInfo.beans}}</text>
						<view class="grid-text">人人豆</view>
					</u-grid-item>
					<u-grid-item index="/pages/my/golds">
						<text class="font-size-extra-lg">{{userInfo.golds}}</text>
						<view class="grid-text">金币</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 菜单 -->
		<!-- 社区服务 -->
		<view class="block-wrap" v-if="hasLogin">
			<view class="block-title mb-20 font-weight-bold font-size-lg">我发布的</view>
			<u-grid :col="4" :border="false" @click="jump">
				<u-grid-item index="/pages/my/shoots">
					<image class="gn-icon" src="/static/m_1.png"></image>
					<view class="grid-text">约拍</view>
				</u-grid-item>
				<u-grid-item index="/pages/my/albums">
					<image class="gn-icon" src="/static/m_2.png"></image>
					<view class="grid-text">作品</view>
				</u-grid-item>
				<u-grid-item index="/pages/my/tasks">
					<image class="gn-icon" src="/static/m_3.png"></image>
					<view class="grid-text">通告</view>
				</u-grid-item>
				<u-grid-item index="/pages/my/spaces">
					<image class="gn-icon" src="/static/m_4.png"></image>
					<view class="grid-text">场所</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="list-cell-wrap" v-if="hasLogin">
			<list-cell hover arrow @tap="jump('/pages/my/thumbs')">
				<view class="list-cell-wrapper">
					<view view="title">我的点赞</view>
					<view class="subtitle"></view>
				</view>
			</list-cell>
			<list-cell hover arrow @tap="jump('/pages/my/collects')">
				<view class="list-cell-wrapper">
					<view view="title">我的收藏</view>
					<view class="subtitle"></view>
				</view>
			</list-cell>
		</view>
		<view class="list-cell-wrap" v-if="hasLogin">
			<list-cell hover arrow @tap="jump('/pages/my/beans')">
				<view class="list-cell-wrapper">
					<view view="title">我的人人豆</view>
					<view class="subtitle"></view>
				</view>
			</list-cell>
			<list-cell v-if="userInfo.is_cert!==1" hover arrow @tap="jump('/pages/my/cert')">
				<view class="list-cell-wrapper">
					<view view="title">身份认证</view>
					<view class="subtitle">
						<text v-if="userInfo.is_cert===-1" class="text-color-danger">认证失败</text>
						<text v-else-if="userInfo.is_cert===0" class="text-color-warning">等待审核中</text>
						<text v-else>去认证</text>
					</view>
				</view>
			</list-cell>
			<list-cell hover arrow last @tap="jump('/pages/guarantee/index')">
				<view class="list-cell-wrapper">
					<view view="title">信用担保</view>
				</view>
			</list-cell>
		</view>
		<view class="list-cell-wrap" v-if="hasLogin">
			<list-cell hover arrow last @click="jump('/pages/my/invite')">
				<view class="list-cell-wrapper">
					<view view="title">邀请好友</view>
					<view class="subtitle">赚人人豆</view>
				</view>
			</list-cell>
		</view>
		<view class="list-cell-wrap">
			<!-- <list-cell hover arrow @tap="toSubscription">
				<view class="list-cell-wrapper">
					<view view="title">订阅公众号</view>
					<view class="subtitle"></view>
				</view>
			</list-cell> -->
			<list-cell hover arrow @click="jump('/pages/help/index')">
				<view class="list-cell-wrapper">
					<view view="title">帮助中心</view>
					<view class="subtitle"></view>
				</view>
			</list-cell>
			<list-cell hover arrow @tap="toContact">
				<view class="list-cell-wrapper">
					<view view="title">联系客服</view>
					<view class="subtitle"></view>
				</view>
			</list-cell>
			<list-cell v-if="hasLogin" hover arrow last @tap="jump('/pages/my/setting')">
				<view class="list-cell-wrapper">
					<view view="title">账号设置</view>
					<view class="subtitle"></view>
				</view>
			</list-cell>
			<!-- <list-cell hover arrow last>
				<view class="list-cell-wrapper">
					<view view="title">开具发票</view>
				</view>
			</list-cell>11 -->
		</view>
		<!-- tabbar -->
		<q-tabbar :active="4" :count="msgCount"></q-tabbar>
		
		<!-- 登录popup -->
		<login-popup ref="loginPopup"></login-popup>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import listCell from '@/components/list-cell/list-cell.vue'
import loginPopup from "@/components/login-popup/login-popup.vue"
export default {
	components: {listCell,loginPopup},
	computed:{
		...mapState(['initialize', 'hasLogin', 'userInfo']),
	},
	methods: {
		...mapMutations(['setLogin']),
		toLogin() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
		},
		jump(url) {
			uni.navigateTo({
				url: url
			});
		},
		toContact() {
			this.$f.customer(this.initialize.customer)
		}
	}
};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>

.head {
	padding: 20rpx;
	background-color: #fff;
	.sub-txt {
		font-size: 24rpx;
		color: #616161;
		display: block;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	margin-bottom: 20rpx;
}

.userinfo {
	display: flex;
	padding: 20rpx;
}

.userinfo .username {
	display: flex;
	flex-direction: column;
}

.grid-text {
	color: #999;
	font-size: 12px;
}

.userinfo u-avatar {
	margin-right: 20rpx;
}

.userinfo .arrow-right {
	margin-left: auto;
}

.btn-login {
	margin: 40rpx 0;
}

.gn-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 20rpx;
}

/*服务按钮*/
.btn-wrap {
	display: flex;
	margin-top: 30rpx;
}

.btn-wrap .btn-contact {
	background-color: #fff;
	margin-left: 15rpx;
	margin-right: 15rpx;
	padding: 20rpx;
	line-height: unset;
	font-size: 12px;
	color: #999;
}

.btn-wrap .btn-contact:active {
	background-color: #f5f5f5;
}

.btn-wrap .btn-contact .txt {
	margin-top: 20rpx;
}

.btn-wrap .btn-contact::after {
	border: unset;
	position: unset;
}

.icon-size {
	font-size: 50rpx;
}

.block-wrap {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	padding: 20rpx;
	overflow: hidden;
}
.list-cell-wrap {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	padding: 0 20rpx;
	overflow: hidden;
}
.list-cell-wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.title {
		font-size: 32rpx;
	}
	
	.subtitle {
		font-size: 24rpx;
		color: #999999;
	}
}
.tag-box {
	.tag{
		padding: 0rpx 10rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
		font-size: 22rpx;
		background-color: #f5f5f5;
		color: #616161;
	}
	
	.tag-guaranty {
		color: #ffffff;
		background-color: #24B19A;
	}
	
	.tag-cert {
		color: #ffffff;
		background-color: #5A84FB;
	}
}
</style>
